<template>
  <div>
    <!-- 添加商品 -->

    <el-form
      ref="form"
      :model="dataList"
      label-width="120px"
      size="mini"
      class="frame"
    >
      <el-form-item label="商品图片">
        <el-upload
          action="http://localhost:9000/upload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-success="uploadSuccess"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>

      <el-form-item label="商品名称">
        <el-input v-model="dataList.title"></el-input>
      </el-form-item>
      <el-form-item label="商品类名">
        <el-input v-model="dataList.cid" placeholder="请输入 1-5"></el-input>
      </el-form-item>
      <!-- 添加款式和价格 -->
      <el-form-item label="款式价格库存">
        <template>
          <span class="cc">
            <el-input v-model="dataList.modul" placeholder="款式"></el-input>
            <el-input v-model="dataList.price" placeholder="价格"></el-input>
            <el-input v-model="dataList.allCount" placeholder="库存"></el-input>
          </span>
        </template>
      </el-form-item>
      <!--  -->
      <el-form-item label="商品描述">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="dataList.detail"
        >
        </el-input>
      </el-form-item>

      <el-form-item size="large">
        <el-button type="primary" class="black" @click="onSubmit"
          >立即创建</el-button
        >
        <el-button class="black">取消</el-button>
      </el-form-item>
    </el-form>
    <!--  -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      dataList: {
        cover: "",
        price: "",
        title: "",
        shelves: 1,
        allCount: "",
        modul: "",
        detail: "",
        color: "",
        pic: "",
        cid: "",
      },
    };
  },
  methods: {
    uploadSuccess(file, fileList) {
      this.dataList.cover = file.data;
      this.dataList.pic = file.data;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    onSubmit() {
      let params = this.dataList;
      // console.log(params);

      this.$confirm("是否添加商品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.commidityApi.add(params).then((res) => {
            // console.log(res);
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "添加成功!",
              });
            } else {
              this.$message({
                type: "error",
                message: "添加失败",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.frame {
  width: 700px;
}
.cc {
  display: flex;
}
.black {
  background: #010101 !important;
  border-color: #010101 !important;
  color:#fff;
}
</style>
